.shape {
  float: left;
  width: 60px;
  height: 60px;
  padding: 10px;
  margin: 10px;
  border: 10px solid greenyellow;
  border-radius: 50%;
  background-color: currentColor;
  background-clip: content-box;
  color: #cd0000;
}

.semi-circle {
    float: left;
    width: 150px;
    height: 150px;
    /* margin: 20px; */
    shape-outside: circle(50% at 0%);
    clip-path: circle(50% at 0%);
    background: lightblue;
    line-height: 150px;
    color:crimson;
}

.ellipse {
    float: left;
    width: 150px;
    height: 150px;
    shape-outside: ellipse(50px 75px at 50% 50%);
    clip-path: ellipse(50px 75px at 50% 50%);
    background-color: cyan;
    /* line-height: 70; */
    color: darkorange;
    clear: both;
}

.inset {
    float: left;
    width: 150px;
    height: 150px;
    shape-outside: inset(10px 20px 30px 40px round 70px);
    clip-path: inset(10px 20px 30px 40px round 70px);
    background-color: cyan;
    line-height: 70;
    color: darkorange;
    clear: both;
}

.polygon {
    float: left;
    width: 150px;
    height: 150px;
    shape-outside: polygon(0 0, 100px 0, 0 50px, 100px 100px, 0 100px);
    clip-path: polygon(0 0, 100px 0, 0 50px, 100px 100px, 0 100px);
    background-color: cyan;
    line-height: 70;
    color: darkorange;
    clear: both;
    
}

.image-shape {
    --image-path: "../images/birds.png";
    float: left;
    width: 200px; height: 300px;
    /* 文字环绕这个鹦鹉 */
    shape-outside: url("../images/birds.png");
    /* 鹦鹉赋色并显示 */
    background-color: #cd0000;
    -webkit-mask: url("../images/birds.png") no-repeat;
    mask: url("../images/birds.png") no-repeat;
}

.graient-shape {
    float: left;
    width: 150px; height: 120px;
    --gradient: linear-gradient(to right bottom, #cd0000, transparent 50%, transparent 90%, #cd0000);
    shape-outside: var(--gradient);
    background: var(--gradient);
}

.shape-image-threshold {
    float: left;
    width: 200px; height: 120px;
    --gradient: linear-gradient(145deg, #cd0000, transparent);
    background: var(--gradient);
    shape-outside: var(--gradient);
    transition: shape-image-threshold .3s;
}